<template>
	<view>
		<my-navbar :title="'发布通知'" :fns="c_navbar.fns" @handle="c_navbar.handle"></my-navbar>
		<view class="app-background"></view>
		<view class="sendNotice-form">
			<view class="form-item has-border" hover-class="button-hover" @click="i_type.clickItem">
				<view>通知类型</view>
				<view v-if="i_type.data.typeName" class="item-value">{{ i_type.data.typeName }}</view>
				<view v-else class="item-value placeholder">请选择通知类型</view>
				<view class="item-line"></view>
			</view>
			<view class="form-item" hover-class="button-hover" @click="i_post.clickItem">
				<view>发送至</view>
				<view v-if="selectedCount" class="item-value">{{ `已选择 ${selectedCount} 人` }}</view>
				<view v-else class="item-value placeholder">请选择成员</view>
			</view>
			<view v-if="selectedCount" class="form-posts">
				<view v-if="selectedList(i).length" v-for="(i, j) in i_post.data.post" :key="j" class="post-item">
					<view class="item-text">
						<text>{{ squadName(i) }}</text>
						<text v-if="i.studentList.length === selectedList(i).length">（全班同学）</text>
						<text v-else>（{{ selectedList(i).length }} 人）</text>
					</view>
					<view class="item-icon" @click="i_post.clickIcon(j)"></view>
				</view>
			</view>
		</view>
		<view class="sendNotice-form">
			<view class="form-notice">
				<view class="notice-title">
					<view class="title-text">
						<view>标题：</view>
						<textarea
							v-if="!isPopupShow"
							class="text-value"
							:auto-height="true"
							:maxlength="-1"
							placeholder="请输入通知标题"
							placeholder-style="color: #cacaca;"
							:value="i_title.data.title"
							@input="i_title.handleInput"
						/>
					</view>
					<view v-if="noticeTemplate.count > 0" class="title-button" hover-class="hover" @click="clickTemplateButton">通知模板</view>
					<view class="title-line"></view>
				</view>
				<view class="notice-content">
					<textarea
						v-if="!isPopupShow"
						class="content-textarea"
						:value="i_content.data.content"
						:maxlength="-1"
						:auto-height="true"
						placeholder="请输入通知内容"
						placeholder-style="color: #cacaca;"
						@input="i_content.handleInput"
					/>
				</view>
				<view class="notice-images">
					<view v-for="(i, j) in i_images.data.images" :key="j" class="image-item">
						<view class="item-icon" @click="i_images.clickDelete(j)"></view>
						<image class="item-image" :src="i.absolutePath" mode="aspectFill" @click="i_images.clickImage(j)"></image>
					</view>
					<view v-if="i_images.data.images.length < 9" class="image-item adder" @click="i_images.clickAdd"><view class="adder-icon"></view></view>
				</view>
			</view>
		</view>
		<view class="sendNotice-form">
			<view v-if="i_type.data.type === 'school_hours_change'" class="form-item" hover-class="button-hover" @click="i_hometime.clickItem">
				<view>设置放学时间</view>
				<view class="item-value">{{ hometimeText }}</view>
			</view>
		</view>
		<!-- 浮动底部 START -->
		<view class="app-offset">
			<view class="sendNotice-bottombar"></view>
			<safe-area></safe-area>
		</view>
		<view class="app-fixed-bottom">
			<view class="sendNotice-bottombar">
				<view class="bottombar-button custom1 app-button" hover-class="hover" @click="clickViewButton">浏览</view>
				<view :class="[!l_isPass || isDebounce ? 'disabled' : '']" class="bottombar-button custom2 app-button" hover-class="hover" @click="clickPublishButton">发布</view>
			</view>
			<safe-area color="#ffffff"></safe-area>
		</view>
		<!-- 浮动底部 END -->
		<template>
			<!-- 通知类型 -->
			<my-popup :custom="2" :show="p_type.show" @handle="p_type.handle">
				<view class="page-popup popup1">
					<view class="popup-title popup1-title">
						<view class="title-center">通知类型</view>
						<view class="title-side"><image class="side-icon" src="/static/img/icon_close.png" @click="p_type.clickIcon"></image></view>
					</view>
					<scroll-view class="popup1-content" :scroll-y="true">
						<view v-for="(i, j) in typeList.list" :key="j" class="content-item" hover-class="button-hover" @click="p_type.clickItem(i)">{{ i.name }}</view>
						<safe-area></safe-area>
					</scroll-view>
				</view>
			</my-popup>
			<!-- 请选择模板 -->
			<my-popup :custom="2" :show="p_template1.show" @handle="p_template1.handle">
				<view class="page-popup popup2">
					<view class="popup-title">
						<view class="title-center">请选择模板</view>
						<view class="title-side"><image class="side-icon" src="/static/img/icon_close.png" @click="p_template1.clickClose"></image></view>
					</view>
					<scroll-view class="popup2-content" :scroll-y="true" @scrolltolower="p_template1.handleScrolltolower">
						<view v-for="(i, j) in noticeTemplate.list" :key="j" class="content-item" @click="p_template1.clickItem(i)">{{ i.title }}</view>
						<safe-area></safe-area>
					</scroll-view>
				</view>
			</my-popup>
			<!-- 模板详情 -->
			<my-popup :custom="2" :show="p_template2.show" @handle="p_template2.handle">
				<view class="page-popup popup3">
					<view class="popup-title">
						<view class="title-center">模板详情</view>
						<view class="title-side">
							<image class="side-icon p2" src="/static/img/icon_back.png" @click="p_template2.clickBack"></image>
							<view class="side-button app-button" hover-class="hover" @click="p_template2.clickUse">使用</view>
						</view>
					</view>
					<view class="popup3-content">
						<view class="content-section">
							<view class="section-title">标题</view>
							<view class="section-content">{{ noticeTemplate.detail.title }}</view>
						</view>
						<view class="content-section">
							<view class="section-title">内容</view>
							<view class="section-content content">{{ noticeTemplate.detail.content }}</view>
						</view>
						<view v-if="noticeTemplate.detail.pictureList" class="content-section">
							<view class="section-images">
								<view class="image-item"><view class="item-image"></view></view>
								<view class="image-item"><view class="item-image"></view></view>
								<view class="image-item"><view class="item-image"></view></view>
								<view class="image-item"><view class="item-image"></view></view>
							</view>
						</view>
						<safe-area></safe-area>
					</view>
				</view>
			</my-popup>
			<!-- 设置放学时间 -->
			<my-popup :custom="2" :show="p_hometime.show" @handle="p_hometime.handle">
				<view class="page-popup popup4">
					<view class="popup-title">
						<view class="title-center">设置放学时间</view>
						<view class="title-side">
							<image class="side-icon" src="/static/img/icon_close.png" @click="p_hometime.clickClose"></image>
							<view class="side-text" @click="p_hometime.clickFinish">完成</view>
						</view>
					</view>
					<view class="popup4-content">
						<picker-view class="content-picker" indicator-style="height: 80rpx;" :value="p_hometime.value" @change="p_hometime.timeChange">
							<picker-view-column>
								<view v-for="(i, j) in p_hometime.ranges[0]" :key="j" class="picker-item" :class="{ active: p_hometime.value[0] == j }">{{ i }}</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(i, j) in p_hometime.ranges[1]" :key="j" class="picker-item" :class="{ active: p_hometime.value[1] == j }">{{ i }}</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(i, j) in p_hometime.ranges[2]" :key="j" class="picker-item" :class="{ active: p_hometime.value[2] == j }">{{ i }}</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</my-popup>
			<my-popup :custom="1" :show="p_back.show" @handle="p_back.handle">
				<view class="popup5">
					<view class="popup5-content">是否保存本次已编辑内容</view>
					<view class="popup5-buttons">
						<view class="button-item app-button" hover-class="hover" @click="p_back.clickButton(0)">不保存</view>
						<view class="button-item primary app-button" hover-class="hover" @click="p_back.clickButton(1)">保存</view>
					</view>
				</view>
			</my-popup>
		</template>
	</view>
</template>

<script>
import form from '@/components/my-form/my-form';
import util from '@/common/util';
import { mapState, mapMutations } from 'vuex';
import sign from '@/common/sign.js';

export default {
	data() {
		return {
			c_navbar: {
				fns: ['clickLeft'],
				handle: fn => {
					if (fn === 'clickLeft') this.c_navbar.handleClickLeft();
				},
				handleClickLeft: () => {
					const listData = form.getListData(this.l_list);
					if (JSON.stringify(this.listData_) === JSON.stringify(listData)) {
						uni.navigateBack();
					} else {
						this.p_back.show = true;
					}
				}
			},
			// 表单项 START
			i_template: {
				data: {
					templateId: ''
				}
			},
			i_type: {
				data: {
					type: '',
					typeName: ''
				},
				clickItem: async () => {
					uni.showLoading({
						mask: true
					});
					try {
						await this.typeList.getList();
					} catch (err) {
						return;
					}
					if (this.typeList.list.length) {
						this.p_type.show = true;
					} else {
						this.$showToast('无通知类型可选择');
					}
				}
			},
			i_post: {
				data: {
					post: []
				},
				clickItem: () => {
					const context = this.i_post;
					uni.setStorageSync('squadList', context.data.post);
					uni.$once('selectSquadMember', squadList => {
						context.data.post = squadList;
						uni.navigateBack();
					});
					uni.navigateTo({
						url: '/packageA/pages/notice/selectMember'
					});
				},
				clickIcon: index => {
					const squad = this.i_post.data.post[index];
					for (let i of this.selectedList(squad)) {
						i.selected = false;
					}
				},
				checkData: () => {
					return [
						() => {
							if (!this.selectedCount) return '请选择成员';
						}
					];
				}
			},
			i_title: {
				data: {
					title: ''
				},
				handleInput: e => {
					const context = this.i_title;
					context.data.title = e.detail.value;
					if (e.detail.value.length > 12) {
						this.$nextTick(() => {
							context.data.title = e.detail.value.substr(0, 12);
							this.$showToast('标题限制12字以内');
						});
					}
				},
				checkData: () => {
					const context = this.i_title;
					return [
						() => {
							if (!context.data.title) return '请输入通知标题';
						}
					];
				}
			},
			i_content: {
				data: {
					content: ''
				},
				checkData: () => {
					const context = this.i_content;
					return [
						() => {
							if (!context.data.content) return '请输入通知内容';
						}
					];
				},
				handleInput: e => {
					const context = this.i_content;
					context.data.content = e.detail.value;
					if (e.detail.value.length > 300) {
						this.$nextTick(() => {
							context.data.content = context.data.content.substr(0, 300);
							this.$showToast('内容限制300字以内');
						});
					}
				}
			},
			i_images: {
				data: {
					images: []
				},
				clickAdd: async () => {
					const context = this.i_images;
					let res1;
					try {
						res1 = await uni.chooseImage({
							count: 9 - context.data.images.length,
							sizeType: ['compressed']
						});
						if (res1[0]) throw new Error(res1[0]);
						res1 = res1[1];
					} catch (err) {
						return;
					}
					uni.showLoading({
						mask: true
					});
					const formData = {
						type: 'app/notice/photo'
					};
					const files = [];
					for (let i of res1.tempFilePaths) {
						files.push({
							uri: i
						});
					}
					const res2 = await this.$api.common.upload_files1({
						formData,
						files
					});
					context.data.images.push(...res2.successData);
					uni.hideLoading();
					this.$showToast(`成功：${res2.successCount} 失败：${res2.errorCount}`);
				},
				clickDelete: index => {
					const context = this.i_images;
					context.data.images.splice(index, 1);
				},
				clickImage: current => {
					const context = this.i_images;
					const urls = context.data.images.map(i => i.absolutePath);
					uni.previewImage({
						urls,
						current
					});
				}
			},
			i_hometime: {
				data: {
					hometime: []
				},
				clickItem: () => {
					this.p_hometime.show = true;
					this.$nextTick(() => {
						let date = new Date(this.i_hometime.data.hometime);
						this.p_hometime.value = [0, date.getHours(), date.getMinutes()];
					});
				}
			},
			// 表单项 END
			// 弹窗 START
			p_type: {
				show: false,
				range: [],
				handle: (fn, e, payload) => {
					if (fn === 'clickMask') this.p_type.show = false;
				},
				clickIcon: () => {
					this.p_type.show = false;
				},
				clickItem: item => {
					this.i_type.data.type = item.type;
					this.i_type.data.typeName = item.name;
					this.p_type.show = false;
				}
			},
			p_template1: {
				show: false,
				handle: (fn, e, payload) => {
					if (fn === 'clickMask') this.p_template1.show = false;
				},
				clickClose: () => {
					this.p_template1.show = false;
				},
				clickItem: async item => {
					try {
						await this.noticeTemplate.getDetail(item.id);
					} catch (err) {
						// 注：错误处理已在方法中进行，此处仅为区分正确与错误的处理
						return;
					}
					this.p_template1.show = false;
					this.p_template2.show = true;
				},
				handleScrolltolower: async e => {
					this.noticeTemplate.pageNo++;
					try {
						await this.noticeTemplate.getList();
					} catch (err) {}
				}
			},
			p_template2: {
				show: false,
				handle: (fn, e, payload) => {
					if (fn === 'clickMask') this.p_template2.show = false;
				},
				clickBack: () => {
					this.p_template2.show = false;
					this.p_template1.show = true;
				},
				clickUse: async () => {
					try {
						await this.typeList.getList();
					} catch (err) {
						return;
					}
					uni.showLoading({
						mask: true
					});
					const detail = this.noticeTemplate.detail;
					const type = this.typeList.list.find(i => i.type === detail.type) || {};
					form.setListData(this.l_list, {
						type: type.type,
						typeName: type.name,
						title: detail.title,
						content: detail.content,
						templateId: detail.id
					});
					this.p_template2.show = false;
					uni.hideLoading();
				}
			},
			p_hometime: {
				show: false,
				ranges: [[], [], []],
				value: [],
				handle: (fn, e, payload) => {
					if (fn === 'clickMask') this.p_hometime.show = false;
				},
				timeChange: e => {
					this.p_hometime.value = Object.values(e.detail.value);
				},
				clickClose: () => {
					this.p_hometime.show = false;
				},
				clickFinish: () => {
					const context = this.p_hometime;
					let date = new Date(this.i_hometime.data.hometime);
					date.setHours(context.value[1]);
					date.setMinutes(context.value[2]);
					this.i_hometime.data.hometime = date.getTime();
					this.p_hometime.show = false;
				},
				init: () => {
					const context = this.p_hometime;
					let date = new Date();
					let D = [`今天 ${util.getDayName2(date.getDay())}`];
					let hh = [];
					let mm = [];
					for (let i = 0; i < 60; i++) {
						let c = i.toString();
						if (c.length === 1) c = '0' + c;
						if (i < 24) hh.push(c);
						mm.push(c);
					}
					context.ranges = [D, hh, mm];
				}
			},
			p_back: {
				show: false,
				back: false,
				handle: fn => {
					if (fn === 'clickMask') this.p_back.show = false;
				},
				clickButton: id => {
					this.p_back.show = false;
					this.p_back.back = true;
					this.IF_SAVE_NOTICE_HISTORY(id == 1);
					uni.navigateBack();
					if (id == 0) return;
					const listData = form.getListData(this.l_list);
					this.SET_NOTICE_HISTORY(listData);
				}
			},
			// 弹窗 END
			// 数据 START
			typeList: {
				list: [],
				getList: () => {
					return new Promise(async (reslove, reject) => {
						const context = this.typeList;
						uni.showLoading({
							mask: true
						});
						let res1;
						try {
							res1 = await this.$api.notice.get_type_select_list();
						} catch (err) {
							uni.hideLoading();
							this.$showToast(err.message || '获取通知类型失败');
							reject();
							return;
						}
						context.list = res1.result;
						uni.hideLoading();
						reslove();
					});
				}
			},
			noticeTemplate: {
				pageCount: 0,
				pageSize: 10,
				pageNo: 1,
				count: 0,
				list: [],
				detail: {},
				getList: ifRefresh => {
					return new Promise(async (reslove, reject) => {
						const context = this.noticeTemplate;
						if (ifRefresh) {
							context.pageCount = 0;
							context.pageNo = 1;
						}
						if (context.pageCount !== 0 && context.pageNo >= context.pageCount + 1) {
							this.$showToast('已加载全部成员数据');
							return reject();
						}
						const page = {
							pageSize: context.pageSize,
							pageNo: context.pageNo
						};
						uni.showLoading({
							mask: true
						});
						let res1;
						try {
							res1 = await this.$api.notice.get_template_list(page);
						} catch (err) {
							uni.hideLoading();
							this.$showToast(err.message || '获取模板列表失败');
							return reject();
						}
						context.pageCount = res1.result.pageCount;
						context.count = res1.result.count;
						if (ifRefresh) context.list = [];
						context.list.push(...res1.result.data);
						uni.hideLoading();
						reslove();
					});
				},
				getDetail: id => {
					return new Promise(async (reslove, reject) => {
						const context = this.noticeTemplate;
						uni.showLoading({
							mask: true
						});
						let res1;
						try {
							res1 = await this.$api.notice.get_template_detail(id);
						} catch (err) {
							uni.hideLoading();
							this.$showToast(err.message || '获取模板列表失败');
							return reject();
						}
						context.detail = res1.result;
						uni.hideLoading();
						reslove();
					});
				}
			},
			listData_: {},
			isDebounce: false
			// 数据 END
		};
	},
	computed: {
		...mapState({
			Notice: state => state.Notice
		}),
		l_list() {
			return [this.i_template, this.i_type, this.i_post, this.i_title, this.i_content, this.i_images, this.i_hometime];
		},
		l_isPass() {
			return form.checkListData(this.l_list).length === 0;
		},
		// 班级名称
		squadName() {
			return squad => {
				return `${squad.gradeName}${squad.squadName}班`;
			};
		},
		hometimeText() {
			return util.dateFormat('MM-dd hh:mm', this.i_hometime.data.hometime);
		},
		// 班级已选中的学生
		selectedList() {
			return squad => {
				if (!Array.isArray(squad.studentList)) this.$set(squad, 'studentList', []);
				return squad.studentList.filter(i => i.selected);
			};
		},
		// 班级未选中的学生
		unselectedList() {
			return squad => {
				if (!Array.isArray(squad.studentList)) this.$set(squad, 'studentList', []);
				return squad.studentList.filter(i => !i.selected);
			};
		},
		// 班级是否为选中“全班同学”
		isSelectAll() {
			return squad => {
				return this.unselectedList(squad).length === 0 && squad.studentList.length !== 0;
			};
		},
		// 所有班级已选中的学生数量
		selectedCount() {
			const context = this.i_post;
			let count = 0;
			for (let i of context.data.post) {
				count += this.selectedList(i).length;
			}
			return count;
		},
		// 由于 textare 层级过高，所以弹框时都要隐藏
		isPopupShow() {
			return this.p_type.show || this.p_template1.show || this.p_template2.show || this.p_hometime.show || this.p_back.show;
		}
	},
	methods: {
		...mapMutations(['IF_SAVE_NOTICE_HISTORY', 'SET_NOTICE_HISTORY']),
		async clickTemplateButton() {
			try {
				await this.noticeTemplate.getList(true);
			} catch (err) {
				// 注：错误处理已在方法中进行，此处仅为区分正确与错误的处理
				return;
			}
			this.p_template1.show = true;
		},
		clickViewButton() {
			const listData = form.getListData(this.l_list);
			uni.setStorageSync('noticeDetail', listData);
			uni.navigateTo({
				url: '/packageA/pages/notice/viewNotice'
			});
		},
		async clickPublishButton() {
			let errors = [];
			errors = form.checkListData(this.l_list, true);
			if (errors.length) {
				const error = errors.find(i => i)[0];
				this.$showToast(error);
				return;
			}
			if (this.isDebounce) return;
			this.isDebounce = true;
			const listData = form.getListData(this.l_list);
			const rangeList = [];
			const studentList = [];
			for (const i of listData.post) {
				if (!i.studentList.length) continue;
				const rangeItem = {
					schoolId: i.schoolId,
					squad: i.squad
				};
				if (this.isSelectAll(i)) {
					// 选中全班同学
					rangeItem.range = 'whole';
					rangeList.push(rangeItem);
				} else if (this.selectedList(i).length > 0) {
					// 选中部分同学
					rangeItem.range = 'par';
					rangeList.push(rangeItem);
					studentList.push(...this.selectedList(i).map(i => i.childId));
				}
			}
			const photoList = [];
			photoList.push(
				...listData.images.map((i, j) => {
					return { sort: j, path: i.relativePath };
				})
			);
			const itemList = [];
			if (listData.type === 'school_hours_change') {
				// 放学时间调整通知
				itemList.push({
					item: util.dateFormat('yyyy-MM-dd hh:mm', listData.hometime)
				});
			}
			const data = {
				type: listData.type,
				title: listData.title,
				content: listData.content,
				rangeList,
				studentList,
				photoList,
				itemList
			};
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.notice.send(data);
			} catch (err) {
				uni.hideLoading();
				this.$showToast(err.message || '发布通知失败');
				this.isDebounce = false;
				return;
			}
			uni.hideLoading();
			this.$showToast('发布通成功');
			this.IF_SAVE_NOTICE_HISTORY(false);
			sign.UPDATE_NOTICE_LIST = true; // 开启首页 onShow 更新通知列表的操作
			uni.redirectTo({
				url: '/packageA/pages/notice/noticeDetail?id=' + res1.result.id
			});
		}
	},
	async onLoad() {
		this.p_hometime.init(); // 初始化设置放学时间弹框
		if (this.Notice.isSave) {
			form.setListData(this.l_list, this.Notice.history);
		} else {
			const date = new Date();
			date.setHours(17);
			date.setMinutes(0);
			const listData = {
				templateId: '',
				title: `${util.dateFormat('MM月dd日', date.getTime())}班级通知`,
				content: '',
				hometime: date.getTime(),
				post: []
			};
			form.setListData(this.l_list, listData);
			try {
				await this.typeList.getList();
			} catch (err) {}
			const typeItem = this.typeList.list.find(i => i.name === '放学时间调整通知') || {};
			form.setItemData(this.i_type, {
				type: typeItem.type,
				typeName: typeItem.name
			});
		}
		this.listData_ = form.getListData(this.l_list); // 用于比较确定用户是否有变更内容
		try {
			await this.noticeTemplate.getList(true); // 用于确定通知模板按钮的显示与否
		} catch (err) {}
	},
	async onPullDownRefresh() {
		try {
			await this.noticeTemplate.getList(true); // 用于确定通知模板按钮的显示与否
		} catch (err) {}
		try {
			await this.typeList.getList();
			const listData = form.getListData(this.l_list);
			if (!(listData.type && listData.typeName)) {
				const typeItem = this.typeList.list.find(i => i.name === '放学时间调整通知') || {};
				form.setItemData(this.i_type, {
					type: typeItem.type,
					typeName: typeItem.name
				});
			}
		} catch (err) {}

		uni.stopPullDownRefresh();
	},
	onBackPress(e) {
		const listData = form.getListData(this.l_list);
		if (JSON.stringify(this.listData_) === JSON.stringify(listData)) {
			return false;
		}
		if (!this.p_back.back) {
			this.p_back.show = true;
			return true;
		}
	}
};
</script>

<style lang="less" scoped>
.sendNotice-form {
	background-color: #ffffff;
	background: #ffffff;
	border-radius: 24rpx;
	overflow: hidden;
	margin: 20rpx 30rpx;

	.form-item {
		height: 100rpx;
		padding: 0 20rpx;

		transition: all 0.3s;

		position: relative;

		font-size: 32rpx;
		color: #222222;

		display: flex;
		justify-content: space-between;
		align-items: center;

		.item-value {
			font-weight: 500;
			display: flex;
			align-items: center;

			&.placeholder {
				color: #cacaca;
			}

			&::after {
				content: '';
				width: 14rpx;
				height: 24rpx;
				background-image: url(/static/notice/icon_right.png);
				background-size: 100%;
				background-repeat: no-repeat;
				margin-left: 15rpx;
			}
		}

		.item-line {
			height: 2rpx;
			margin: 0 20rpx;
			background-color: #e3e4e6;

			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}

	.form-posts {
		padding: 10rpx;

		font-size: 32rpx;
		color: #222222;

		display: flex;
		flex-wrap: wrap;

		.post-item {
			height: 48rpx;
			border-radius: 24rpx;
			background-color: #f2f2f2;
			margin: 0 10rpx 10rpx 10rpx;
			padding: 0 20rpx;

			display: flex;
			justify-content: center;
			align-items: center;

			.item-text {
				font-size: 24rpx;
				color: #ff6600;
			}

			.item-icon {
				width: 16rpx;
				height: 16rpx;
				background-image: url(/static/notice/icon_delete.png);
				background-size: 100%;
				background-repeat: no-repeat;

				transition: all 0.3s;

				&:active {
					opacity: 0.5;
				}
			}
		}
	}

	.form-notice {
		.notice-title {
			height: 100rpx;
			padding: 0 20rpx;

			position: relative;

			font-size: 32rpx;
			color: #222222;

			display: flex;
			justify-content: space-between;
			align-items: center;

			.title-text {
				display: flex;
				align-items: center;

				.text-value {
					flex: 1;
					font-size: 32rpx;
				}
			}

			.title-button {
				width: 170rpx;
				height: 48rpx;
				color: #ff6600;
				border: 2rpx solid #ff6600;
				border-radius: 30rpx;
				overflow: hidden;

				transition: all 0.3s;

				font-size: 28rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				&:active {
					opacity: 0.5;
				}
			}

			.title-line {
				margin: 0 20rpx;

				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;

				height: 2rpx;
				background-color: #e3e4e6;
			}
		}

		.notice-content {
			font-size: 32rpx;
			padding: 40rpx 20rpx 80rpx 20rpx;

			.content-textarea {
				width: 100%;

				font-size: 32rpx;
			}
		}

		.notice-images {
			padding-bottom: 20rpx;

			display: flex;
			flex-wrap: wrap;

			.image-item {
				width: 148rpx;
				height: 130rpx;
				background-color: #cecece;
				border-radius: 8rpx;
				margin-left: 20rpx;
				margin-bottom: 20rpx;

				position: relative;

				.item-image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;

					overflow: hidden;
				}

				.item-icon {
					width: 32rpx;
					height: 32rpx;
					background-image: url(/static/notice/icon_delete2.png);
					background-size: 100%;
					background-repeat: no-repeat;

					position: absolute;
					right: 0;
					top: 0;
					transform: translate(25%, -25%);

					transition: all 0.3s;

					&:active {
						opacity: 0.5;
					}
				}

				&.adder {
					background-color: #ffffff;
					border: 2rpx dashed #c7c7cc;

					display: flex;
					align-items: center;
					justify-content: center;

					transition: all 0.3s;

					&:active {
						opacity: 0.5;
					}

					.adder-icon {
						width: 63rpx;
						height: 54rpx;
						background-image: url(/static/notice/icon_camera.png);
						background-size: 100%;
						background-repeat: no-repeat;
					}
				}
			}
		}
	}
}

.sendNotice-bottombar {
	width: 750rpx;
	height: 112rpx;
	background-color: #ffffff;
	border-top: 2rpx solid #e3e4e6;
	padding: 0 47rpx;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: space-between;

	.bottombar-button {
		width: 304rpx;
		height: 80rpx;
		border-radius: 60rpx;
		overflow: hidden;

		position: relative;

		font-size: 33rpx;

		display: flex;
		align-items: center;
		justify-content: center;

		&.custom1 {
			color: #222222;
			border: 2rpx solid #e3e4e6;
		}

		&.custom2 {
			color: #ffffff;
			background-image: url(/static/notice/button_background.png);
			background-size: 100%;
			background-repeat: no-repeat;
		}
	}
}

.page-popup {
	height: 750rpx;
	background-color: #ffffff;
	border-radius: 30rpx 30rpx 0 0;

	display: flex;
	flex-direction: column;

	.popup-title {
		height: 120rpx;
		border-bottom: 2rpx solid #e3e4e6;

		position: relative;

		font-size: 36rpx;
		color: #222222;

		display: flex;
		align-items: center;
		justify-content: flex-end;

		.title-center {
			text-align: center;

			position: absolute;
			left: 0;
			right: 0;
		}

		.title-side {
			z-index: 1;

			position: absolute;
			left: 0;
			right: 0;

			display: flex;
			align-items: center;

			.side-icon {
				transition: all 0.3s;

				&:active {
					opacity: 0.5;
				}
			}
		}
	}
}

.popup1 {
	.title-side {
		justify-content: flex-end;

		.side-icon {
			width: 24rpx;
			height: 24rpx;
			padding: 30rpx;
		}
	}

	.popup1-content {
		flex: 1;
		overflow: scroll;

		font-size: 32rpx;
		color: #222222;

		.content-item {
			line-height: 120rpx;
			margin-left: 30rpx;
			border-bottom: 2rpx solid #e3e4e6;

			transition: all 0.3s;
		}
	}
}

.popup2 {
	.title-side {
		justify-content: flex-end;

		.side-icon {
			width: 24rpx;
			height: 24rpx;
			padding: 30rpx;
		}
	}

	.popup2-content {
		flex: 1;
		font-size: 32rpx;
		color: #222222;
		overflow: hidden;

		padding-left: 30rpx;

		.content-item {
			line-height: 120rpx;
			border-bottom: 2rpx solid #e3e4e6;
		}
	}
}

.popup3 {
	.title-side {
		justify-content: space-between;

		.side-icon {
			width: 14rpx;
			height: 24rpx;
			padding: 30rpx;
		}

		.side-button {
			width: 110rpx;
			height: 52rpx;
			background-color: #ff6600;
			border-radius: 30rpx;
			margin-right: 30rpx;

			position: relative;

			color: #ffffff;
			font-size: 28rpx;

			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.popup3-content {
		flex: 1;
		overflow: scroll;

		.content-section {
			padding-top: 40rpx;

			.section-title {
				font-size: 32rpx;
				color: #707070;
				margin: 0 30rpx 20rpx 30rpx;
			}

			.section-content {
				border-radius: 12rpx;
				background-color: #f2f4f6;
				margin: 0 30rpx;

				padding: 25rpx 20rpx 25rpx 20rpx;
				font-size: 32rpx;
				color: #222222;

				&.content {
					padding: 38rpx 20rpx 38rpx 20rpx;
					font-size: 36rpx;
				}
			}

			.section-images {
				display: flex;
				flex-wrap: wrap;

				padding: 0 20rpx;
				padding-bottom: 50rpx;

				.image-item {
					width: 25%;
					height: 130rpx;
					padding: 0 10rpx;
					box-sizing: border-box;

					.item-image {
						width: 100%;
						height: 100%;
						background-color: #cecece;
						border-radius: 8rpx;
					}
				}
			}
		}
	}
}

.popup4 {
	.title-side {
		justify-content: space-between;

		.side-icon {
			width: 24rpx;
			height: 24rpx;
			padding: 30rpx;
		}

		.side-text {
			margin-right: 30rpx;

			transition: all 0.3s;

			font-size: 36rpx;
			color: #ff6600;

			&:active {
				opacity: 0.5;
			}
		}
	}

	.popup4-content {
		flex: 1;

		.content-picker {
			height: 100%;
			text-align: center;

			.picker-item {
				font-size: 36rpx;
				line-height: 80rpx;
				color: #222222;

				&.active {
					color: #ff6600;
				}
			}
		}
	}
}

.popup5 {
	width: 594rpx;
	border-radius: 30rpx;
	background-color: #ffffff;
	overflow: hidden;

	color: #222222;

	.popup5-content {
		line-height: 60rpx;
		padding: 40rpx 30rpx;

		font-size: 32rpx;
		text-align: center;
	}

	.popup5-buttons {
		height: 90rpx;
		border-top: 2rpx solid #e3e4e699;

		display: flex;

		.button-item {
			flex: 1;
			border-right: 2rpx solid #e3e4e699;

			position: relative;

			font-size: 32rpx;
			font-weight: 500;
			color: #222222;

			display: flex;
			align-items: center;
			justify-content: center;

			&:last-child {
				border-right: none;
			}

			&.primary {
				color: #ff6600;
			}
		}
	}
}
</style>
